<template>
    <el-card>
        <el-form inline>
            <el-form-item label="一级分类">
                <!-- change：下拉框发生变化，调用handler -->
                <el-select v-model="categoryStore.c1Id" @change="handler" :disabled="scene==0?false:true">
                    <!-- 
                        label：显示的文字
                        value：select下拉菜单收集的数据
                     -->
                    <el-option v-for="(c1,index) in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select v-model="categoryStore.c2Id" @change="handler1" :disabled="scene==0?false:true">
                    <el-option v-for="c2 in categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="categoryStore.c3Id" :disabled="scene==0?false:true">
                    <el-option v-for="c3 in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup name="Category">
    // 引入组件挂载完毕钩子
    import {onMounted} from 'vue' 
    // 引入分类相关的仓库
    import useCategoryStore from '@/store/modules/category'

    let categoryStore=useCategoryStore()
    // 接收父组件传递过来的场景scene
    defineProps(['scene'])

    // 组件挂载完毕,通知仓库发请求获取一级分类的数据
    onMounted(()=>{
        // 获取一级分类数据
        getC1()
    })

    // 通知仓库发请求获取一级分类的数据
    async function getC1(){
        categoryStore.getC1()
    }

    // 一级菜单下拉change事件
    function handler(){
        // 需要将二级和三级选中的下拉框数据以及三级收集到的所有数据清空
        categoryStore.c2Id=''
        categoryStore.c3Arr=[]
        categoryStore.c3Id=''
        // 通知仓库获取二级分类的数据
        categoryStore.getC2()
    }

    // 二级菜单下拉change事件
    function handler1(){
        // 需要将三级选中的下拉框的数据清空
        categoryStore.c3Id=''
        // 通知仓库获取三级分类的数据
        categoryStore.getC3()
    }
</script>

<style scoped>
    .el-select {
        --el-select-width: 220px;
    }
</style>